<html>
  <head>
    <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
  </head>
  <body>
  	Universe Class definition
  	<table>
  	  <tr>
  	  <td>ID</td>
  	  <td>Display Name</td>
  	  <td>Description</td>
  	  <td>Rating</td>
      </tr>
      {% for universe in universes %}
  	  <tr>
      	<td> {{ universe.id }} </td>
      	<td> {{ universe.display_name }} </td>
      	<td> {{ universe.description }} </td>
      	<td> {{ universe.rating }} </td>
      </tr>
      {% endfor %}
    </table>

	Input for new Universe
    <form action="/universe" method="post">
      <div>Display Name: <input type="text" name="display_name"></input></div>
      <div>Description: <textarea name="description" rows="3" cols="60"></textarea></div>
      <div>
      	Rating:
      	<span class='rating_grey' onClick='rating1();'></span>
      	<span class='rating_grey' onClick='rating2();'></span>
      	<span class='rating_grey' onClick='rating3();'></span>
      	<span class='rating_grey' onClick='rating4();'></span>
      	<span class='rating_grey' onClick='rating5();'></span>
      	<input type="hidden" name="rating"/>
      </div>
      <div><input type="submit" value="Save Universe"></div>
    </form>

    <a href="{{ url }}">{{ url_linktext }}</a>
    
    <script language='javascript'>
    function rating1() {
    	document.getElementsByName('rating_grey')[0].value = 1;
    }
    function rating2() {
    	document.getElementsByName('rating_grey')[1].value = 2;
    }
    function rating3() {
    	document.getElementsByName('rating_grey')[2].value = 3;
    }
    function rating4() {
    	document.getElementsByName('rating_grey')[3].value = 4;
    }
    function rating5() {
    	document.getElementsByName('rating_grey')[4].value = 5;
    }
    </script>

  </body>
</html>